<template>
    <div>
        <h2>姓名：{{name}}</h2>
        <h2>年龄：{{age}}</h2>
        <h2>薪资：{{job.j1.salary}}K</h2>
        <button @click="name+='~'">修改姓名</button>
        <button @click="age++">增长年龄</button>
        <button @click="job.j1.salary++">涨薪</button>
    </div>
</template>

<script>
import { ref, toRefs, watchEffect,shallowReactive} from "vue";

export default {
    name: 'Demo',
    setup(){
        let sum = ref(0)
        let msg = ref('你好啊')
        let person = shallowReactive({
            name: '张',
            age: 20,
            job:{
                j1:{
                    salary: '30'
                }
            }
        })

        watchEffect(()=>{
            let p = person;
            console.log('==>', JSON.stringify(p));
        })

        return {
            sum,
            msg,
            // name: toRef(person,'name'),
            // age: toRef(person,'age'),
            // salary: toRef(person.job.j1,'salary')
            ...toRefs(person)
        }


    }
}
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>
